//地图旁边的进度条
// let color = ['#ed8884', '#1CE7DC', '#60cda0', '#006cff', '#7030a0']

var colors = {
  dzzh: '#FF00FF', // 地质灾害
  rqzdxc: '#365AF3', // 燃气重点巡查
  sk: '#5CBEE1', // 水库
  sdz: '#8651F4', // 水电站
  shzh: '#F94D4B', // 山洪灾害
  yhq: '#F3A23A', // 易洪区
  slfh: '#EC342F', // 深林防火
};

function coordSwitch(strDu, strFen, strMiao, len) {
	len = len > 6 || typeof len == 'undefined' ? 6 : len //精确到小数点后最多六位
	strDu =
		typeof strDu == 'undefined' || strDu == '' ? 0 : parseFloat(strDu)
	strFen =
		typeof strFen == 'undefined' || strFen == ''
			? 0
			: parseFloat(strFen) / 60
	strMiao =
		typeof strMiao == 'undefined' || strMiao == ''
			? 0
			: parseFloat(strMiao) / 3600
	var digital = strDu + strFen + strMiao
	if (digital == 0) {
		return ''
	} else {
		return digital.toFixed(len)
	}
}
//地图
var mapchart = ''
function mapchar() {
  var markPointData = [
    {
      name: '金山镇马驰村2组兰登万屋后滑坡',
      coord: [coordSwitch(104, 30, 50.1), coordSwitch(31, 25, 43.31)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '金山镇安家村7组松树山梁子滑坡',
      coord: [coordSwitch(104, 32, 10.57), coordSwitch(31, 25, 43.14)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '白马关镇三叉河村3组谢文保房前滑坡',
      coord: [coordSwitch(104, 25, 43.6), coordSwitch(31, 18, 9.55)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '白马关镇凤雏村10组曾奋菊房后滑坡',
      coord: [coordSwitch(104, 28, 11.22), coordSwitch(31, 18, 22.58)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '万安镇长虹村7组万宝路边崩塌',
      coord: [coordSwitch(104, 29, 45.29), coordSwitch(31, 16, 44.91)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '万安镇长虹村6组唐水金房后滑坡',
      coord: [coordSwitch(104, 30, 7.47), coordSwitch(31, 17, 10.92)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '略坪镇建国村天台寺滑坡',
      coord: [coordSwitch(104, 24, 29.58), coordSwitch(31, 19, 38.6)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '略坪镇建国村8组蔡家大院滑坡',
      coord: [coordSwitch(104, 22, 9.83), coordSwitch(31, 20, 7.98)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '调元镇三渔村三组陈明友房后崩塌',
      coord: [coordSwitch(104, 26, 58.89), coordSwitch(31, 21, 16.14)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '新盛镇木桥村2组郭家沟滑坡',
      coord: [coordSwitch(104, 40, 13.14), coordSwitch(31, 15, 25.01)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '鄢家镇壁山村7组林从辉滑坡',
      coord: [coordSwitch(104, 36, 16.04), coordSwitch(31, 16, 48.89)],
      itemStyle: { normal: { color: colors.dzzh } },
      
    },
    {
      name: '新盛镇金铃村',
      coord: ['104.6213878', '31.30921372'],
      itemStyle: {
        normal: {
          color: colors.slfh,
        },
      },
      
    },
    {
      name: '新盛镇天鹅村 ',
      coord: ['104.6268972', '31.27024525'],
      itemStyle: {
        normal: {
          color: colors.slfh,
        },
      },
      
    },
    {
      name: '金山镇谭家坝村 ',
      coord: ['104.5697585', '31.36531145'],
      itemStyle: {
        normal: {
          color: colors.slfh,
        },
      },
      
    },
    {
      name: '金山镇谭家坝村 ',
      coord: ['104.5698618', '31.39267667'],
      itemStyle: {
        normal: {
          color: colors.slfh,
        },
      },
      
    },
    {
      name: '白马关镇海棠村 ',
      coord: ['104.5203038', '31.25383289'],
      itemStyle: {
        normal: {
          color: colors.slfh,
        },
      },
      
    },
    {
      name: '鄢家镇高垭村 ',
      coord: ['104.546756', '31.23066183'],
      itemStyle: {
        normal: {
          color: colors.slfh,
        },
      },
      
    },
  ]
  let itemStyle = {
    normal: {
      borderColor: '#7AF1F0',
      borderWidth: 1,
      shadowColor: '#7AF1F0',
      shadowBlur: 3,
      areaColor: 'rgba(120,152,225, 0.05)',
    },
    emphasis: {
      areaColor: 'rgba(120,152,225, 0.1)',
    },
    zoom: 1.2,
  }

  var uploadedDataURL = 'js/luojiang.json'
  mapchart = echarts.init(document.getElementById('map-chart'))
  $.getJSON(uploadedDataURL, function (geoJson) {
    echarts.registerMap('LJ', geoJson)
    option = {
      title: {
        text: '',
        color: '#fff',
        x: '20px',
        y: '20px',
        // subtext: '人口密度数据来自Wikipedia',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b}",
      },
      geo: {
        show: true,
        map: 'LJ',
        label: {
          emphasis: {
            show: false,
          },
        },
        roam: false,
        itemStyle: {
          normal: {
            borderColor: '#4085d3',
            areaColor: 'rgba(120,152,225, 0.00)',
          },
          emphasis: {
            // areaColor: '#4f92fa'  //鼠标移上每一省份的颜色
            areaColor: 'rgba(120,152,225, 0.1)',
          },
        },
      },
      series: [
        {
          type: 'map',
          mapType: 'LJ', // 自定义扩展图表类型
          label: {
            show: true,
            color: '#fff',
          },
          markPoint: {
            symbolSize: [24, 28],
            symbol: `path://M6.9,0.5C3.4,0.5,0.5,3.4,0.5,7c0,0.1,0,0.2,0,0.2c0.1,1.8,0.9,3.6,2.2,4.9l0,0l4.3,4.4l4.1-4.3l0.3-0.3
            c1.2-1.3,1.9-3,2-4.7c0-0.1,0-0.2,0-0.2C13.4,3.4,10.5,0.5,6.9,0.5z M9.3,9c-0.6,0.6-1.5,1-2.4,1S5.2,9.6,4.5,9s-1-1.5-1-2.4
            s0.3-1.7,1-2.4s1.5-1,2.4-1s1.7,0.3,2.4,1c0.6,0.6,1,1.5,1,2.4S9.9,8.4,9.3,9z`,
            symbolOffset: [0, '-50%'],
            //图表标注。
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: 'rgba(72,150,128,1)',
              },
            },
            data: markPointData,
          },
          itemStyle: itemStyle,
        },
      ],
    }
    //myChart.setOption(option);
    mapchart.setOption(option)
    mapchart.on('click', function (params) {
      //点击事件
      alert(params)
    })
  })

  let legends = [
    {color: colors.dzzh,name:'地质灾害'},
    {color: colors.slfh,name:'森林防火'},
  ]
  let li = '';
  for(let legend of legends){
      li+=' <li> <i class="color-icon" style="background-color: '+ legend.color +';"></i>'+ legend.name +'</li>'
  }
  document.querySelector(".map-legend").innerHTML=li;
}
